<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>index页</title>
	<style type="text/css">
	* {
    padding: 0;
    margin: 0;
  }

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
  }

  main {
    width: 400px;
    flex-direction: column;
    position: relative;
    margin-right: 20px;
  }

  main nav {
    display: flex;
    height: 50px;
    align-items: center;
  }

  main nav a,
    main nav span {
    background: #95a5a6;
    margin-right: px;
    padding: 10px 20px;
    border: solid 1px #333;
    color: #fff;
    text-decoration: none;
  }

  main nav a:first-of-type {
    background: #e67e22;
  }

  section {
    height: 200px;
    width: 100%;
    background: #f1c40f;
    position: absolute;
    font-size: 5em;
    display: none;
  }

  .hd-tab section:first-of-type {
    display: block;
  }

  section:nth-child(even) {
    background: #27ae60;
  }
</style>
</head>
<body>
  <main class="tab1">
    <nav>
      <a href="javascript:;">后盾人</a>
      <a href="javascript:;">hdcms</a>
    </nav>
    <section>1</section>
    <section>2</section>
  </main>
  <main class="tab2">
    <nav>
      <span href="javascript:;">后盾人</span>
      <span href="javascript:;">hdcms</span>
    </nav>
    <section>1</section>
    <section>2</section>
  </main>
  <script type="text/javascript">
    function extend(sub, sup) {
      sub.prototype = Object.create(sup.prototype);
      Object.defineProperty(sub.prototype, "constructor", {
        value: sub,
        enumerable: false
      });
    }

  // +++++++++++++ 动画 +++++++++++++
  /**
   * 动画
   *   显示
   *   隐藏
   *   设置颜色
   */
  function Animation() {

  }
  Animation.prototype.show = function() {
    this.style.display = "block";
  };
  Animation.prototype.hide = function() {
    this.style.display = "none";
  };
  Animation.prototype.background = function(color) {
    this.style.backgroundColor = color;
  };


  // +++++++++++++ 选项卡 +++++++++++++
  /**
   * 选项卡
   *   点击切换
   *     resetAll -> action(i)
   */
  function Tab(el, opts= {}) {
    // 默认参数项
    var defauts = {
      link: "a",
      callback: null,
      section:"section",
      el: null,
      // 触发类型， click/mouseover/mouseenter
      triggerType: 'mouseover',
    }
    // 对象浅拷贝
    let options = Object.assign(defauts, opts);

    // 定义 options变为只读的属性
    Object.defineProperties(this, {
        options: {
          get() { return options; },
        }
    })

    // 只有一个参数时
    if(arguments.length === 1 && typeof el === 'object') {
      Object.assign(options, el);
    }else {
      options.el = el
    }

    // options/callback可以变为只读属性 todo
    // this.options = options;
    
    this.callback = options.callback
    this.tab = document.querySelector(options.el);
    this.links = this.tab.querySelectorAll(options.link);
    this.sections = this.tab.querySelectorAll(options.section);
  }
  // 选项卡继承动画
  extend(Tab, Animation);

  Tab.prototype.run = function() {
    this.bindEvent();
    this.reset();
    this.action(0);
    return this
  };

  // 绑定选项卡切换的事件
  Tab.prototype.bindEvent = function() {
      this.links.forEach((el, i) => {
        el.addEventListener(this.options.triggerType, () => {
          this.reset();
          this.action(i);
          if (this.callback) this.callback(el, i);
        });
      });
  };

  // 执行选项卡切换动作
  Tab.prototype.action = function(i) {
    this.background.call(this.links[i], "#e67e22");
    this.show.call(this.sections[i]);
  };

  // 点击之外的选项卡 进行复位操作
  Tab.prototype.reset = function() {
    this.links.forEach((el, i) => {
      this.background.call(this.links[i], "#95a5a6");
      this.hide.call(this.sections[i]);
    });
  };


  var t1 = new Tab(".tab1", {
      callback() {
        console.log("tab1 切换");
      },
      triggerType: 'click'
    }).run();

  console.log('--------------------------------------------------------\n')
  
 var t2 =  new Tab({
      el: ".tab2",
      link: 'span',
      callback(el, idx) {
        console.log("tab2 houdurnen.com",el, idx);
      }
    }).run();
 console.log(t2)
 
</script>
</body>
</html>